<template>
    <el-container direction="vertical">
        <router-view class="main" :list="list">
        </router-view>
    </el-container>
</template>
  
<script setup lang='ts'>
import { computed, ref, onMounted, watch } from "vue";
import { useStore } from "vuex";
import { SET_TEAM } from "./store/mutation-types";
import { Storekey } from "../interface";
import { useRouter } from "vue-router";
import { useStorage, useStyleTag, useUrlSearchParams } from '@vueuse/core'
import { asyncgetzhimahuuer } from "../api";
import Studycodemodel from "../mysql_interface/studycodemodel";
const users = useStorage<Studycodemodel.Iuser[]>('users', [])
const show = ref(false)
const store = useStore(Storekey)
const url = new URL(window.location.href)
const params = url.searchParams
const unionid = params.get('unionid')
const openid = params.get('openid')
const getuser = computed(() => {
    return store.state.user
})

const list = ref<Studycodemodel.Izhimahuuser[]>([])


onMounted(async () => {
    if (unionid) {
        const e = await asyncgetzhimahuuer({ unionid })
        const { rows } = e
        list.value = rows
        users.value = rows.map(e => {
            return {
                ID: e.userid,
                password: e.user?.password,
                phonenum: e.user?.phonenum,
                name: e.user?.name,
                gid: e.user?.gid,
            }
        })
        if (users.value.length) {
            router.push('/users')
        } else {
            router.push('/login')
        }
    }

    await store.dispatch('actionlabel')
    show.value = true;
})

watch(() => getuser.value, (v) => {
    if (v) {
        store.dispatch('actionteam', { userid: v.ID })
    } else {
        store.commit(SET_TEAM, null);
    }
})



const router = useRouter()


</script>
  
<style scoped>
.main {
    margin-bottom: 25px;
}
</style>
  
<style>
html,
body,
#app {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

:root {
    --color--cheng2: #d96248;
    --color--cheng3: #b34532;
    --color--cheng: #ff8461;
}

#app {
    position: relative;
}

#app button:focus {
    outline: 0px !important;
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

pre {
    margin: 0.5em 0;
    padding: 0.3em 0.5em;
    border: #ddd solid 1px;
    background: #f8f8f8;
    border-radius: 3px;
    overflow: auto;
    font-size: 0.875em;
    font-family: monospace;
    min-height: 30px;
}

a:hover {
    text-decoration: none;
}

.table tr td {
    font-size: 15px;
}

.text-00c8a5 {
    color: var(--color-cheng) !important;
}

.bg-00c8a5 {
    background-color: var(--color-cheng) !important;
    color: #fff;
}
</style>
  